<template>
  <div>
    <!-- <div id="home">
            <img class="home-background" :src="this.defaultConfig.homebackground" />
            <div class="home-center home-map">
            <div style="position: relative">
                <img
                class="home-chinaMap-img"
                v-if="ipSource === 'domestic'"
                :src="this.defaultConfig.homeChinaMap"
                />
                <img
                class="home-chinaMap-img"
                v-else
                :src="this.defaultConfig.homeMap"
                />
                <img
                class="home-lat-img"
                v-if="latShow"
                :src="this.defaultConfig.homeLat"
                />
            </div>
            </div>
            <div class="home-center home-txtSecret">
            <img class="home-txtSecret-img" :src="this.defaultConfig.homeTxtSecret" />
            </div>
            <div class="home-center home-deepTip">
            <img class="home-deepTip-img" :src="this.defaultConfig.homeDeepTip" />
            </div>
            <div class="home-center home-submarine">
            <img class="home-submarine-img" :src="this.defaultConfig.submarine" />
            </div>
            <div class="home-center home-bottom-btn-div home-bottom-text" v-if="distanceShow">
            我和马沟的距离<span class="home-distance-text">{{ distance }}</span
            >KM<br />正在前往中...
            </div>
            <div class="home-center home-bottom-btn-div" v-else>
            <img
                class="home-bottom-btn"
                @click="homeBtnDownClick"
                :src="this.defaultConfig.homebtnStart"
            />
            </div>
        </div> -->

    <div id="game">
      <div class="background" id="backgroundImg">
        <img class="background" :src="this.defaultConfig.background" />
        <div id="loading-bubble" class="loading-bubble"></div>
      </div>
      <div id="ruler" class="ruler"></div>

      <img
        v-if="audioStatus"
        class="audio"
        :src="this.defaultConfig.audioOpen"
        @click="audioClick"
      />
      <img
        v-else
        class="audio"
        :src="this.defaultConfig.audioClose"
        @click="audioClick"
      />
      <img
        class="logo"
        id="logo"
        :src="this.defaultConfig.logo"
        @click="logoTest"
      />
      <!-- <div class="submarine" id="submarine">
        <img
            class="submarine-img"
            :src="this.defaultConfig.submarine"
            @click="submarineClick"
        />
        </div> -->
      <Notice
        v-if="currentDeep === 0"
        class="notice noticeStart"
        :dataText="noticeText1"
        bgType="windowNotice"
        :defaultConfig="this.defaultConfig"
      ></Notice>
      <Notice
        v-if="noticeShow && this.getInfoFish(currentDeep)"
        class="notice noticeFish"
        :dataText="noticeText2"
        bgType="windowWarning"
        :defaultConfig="this.defaultConfig"
      ></Notice>
      <Notice
        v-if="noticeStatus == 'speed'"
        class="notice noticeSpeed"
        :dataText="noticeText5"
        bgType="windowWarning"
        :defaultConfig="this.defaultConfig"
      ></Notice>
      <Notice
        v-if="noticeStatus == 'ChinaHonor'"
        class="notice noticeFish"
        :dataText="noticeText3"
        bgType="windowWarning"
        :defaultConfig="this.defaultConfig"
      ></Notice>
      <Notice
        v-if="noticeStatus == 'bottom'"
        class="notice noticeFinish"
        :dataText="noticeText4"
        bgType="windowNotice"
        :defaultConfig="this.defaultConfig"
      ></Notice>
      <Notice
        v-if="noticeStatus == 'scaning'"
        class="notice noticeFish"
        :dataText="noticeText6"
        bgType="windowWarning"
        :defaultConfig="this.defaultConfig"
      ></Notice>
      <div v-if="dbBtnShow">
        <div class="bottom-btn-div" v-if="btnStatus === 'down'">
          <img
            class="bottom-btn"
            @click="btnDownClick"
            v-if="btnDownStatus"
            :src="this.defaultConfig.btnDownClick"
          />
          <img
            class="bottom-btn"
            @click="btnStopClick"
            v-else
            :src="this.defaultConfig.btnStopClick"
          />
          <img
            class="bottom-btn"
            @click="btnDownDisable"
            :src="this.defaultConfig.btnScanDisable"
          />
        </div>
        <div class="bottom-btn-div" v-else-if="btnStatus === 'scan'">
          <img class="bottom-btn" :src="this.defaultConfig.btnDownDisable" />
          <img
            class="bottom-btn"
            @click="scanClick"
            :src="this.defaultConfig.btnScanClick"
          />
        </div>
        <div class="bottom-btn-div" v-else-if="btnStatus === 'downAndScan'">
          <img
            class="bottom-btn"
            @click="btnDownClick"
            :src="this.defaultConfig.btnDownClick"
          />
          <img
            class="bottom-btn"
            @click="scanClick"
            :src="this.defaultConfig.btnScanClick"
          />
        </div>
      </div>
    </div>
    <audio
      id="audioBg"
      :src="this.defaultConfig.audioBg"
      loop="loop"
      preload="auto"
      hidden="true"
    ></audio>
    <audio
      id="audioSubmarine"
      :src="this.defaultConfig.audioSubmarine"
      loop="loop"
      preload="auto"
      hidden="true"
    ></audio>
    <audio
      id="audioFinish"
      :src="this.defaultConfig.audioFinish"
      preload="auto"
      hidden="true"
    ></audio>
    <audio
      id="audioScan2"
      :src="this.defaultConfig.audioScan2"
      preload="auto"
      hidden="true"
    ></audio>
  </div>
</template>

<script>
import { EventBus } from "../../utils/EventBus.js";
import Notice from "@/components/Notice";
import { Tween, Particle, Data, Animation, Change } from "@/utils/animation";
import $getQuery from "spore-kit-location/getQuery";
export default {
  name: "Game",
  data() {
    return {
      ipSource: "domestic", //判断国内外用户
      mariana: {
        lat: 19.573847,
        lon: 140.643201,
      }, //马沟经纬度
      //game
      btnStatus: "down", //当前底部按钮组的状态
      noticeStatus: "", //当前气泡框的状态
      data: new Data(), //初始化鱼类（固定位置出现的鱼类）
      nowFish: "ChinaHonor", //当前鱼类 （固定位置出现的鱼类）
      scanStoreFish: "", // 识别生物计数的暂存器
      bgMove: false,
      speedShow: false, //加速弹框
      noticeShow: false, //控制主船的气泡框
      btnDownStatus: true, //下潜和停止按钮的切换
      dbBtnShow: true, //两个按钮的展示(主船到底隐藏)
      currentDeep: 0, //当前深度 (对应标尺)
      deepTimer: undefined, //下潜定时器
      cHeight: document.documentElement.clientHeight, //浏览器高度
      particles: [], //气泡数组
      audioStatus: true, //音效默认打开
      clickFishNum: 0, //已识别生物 数目
      videoJumpTag: true, //tag

      //tips
      noticeText1:
        "已入仓，可随时下潜，点击下方<span style='color:#ffe786'>【下潜】</span>按钮潜艇下潜，点击<span style='color:#ffe786'>潜艇本身</span>可了解更多信息。",
      noticeText2:
        "发现奇特生物，请点击<span style='color:#baf4ff '>【扫描】</span>键查看详情！",
      noticeText3:
        "遇到中国马沟探索踪迹，请<span style='color:#baf4ff '>【扫描】</span>查看！",
      noticeText4: "本次奋斗者号万米深潜顺利完成！",
      noticeText5: "加速下潜！",
      noticeText6: "扫描中...",

      //data
      //deeps: [440, 1180, 1780, 2280, 2780, 3580, 4780, 6780, 7780],
      deeps: [540, 1400, 2000, 2500, 3000, 3800, 5000, 7000, 8000],

      scaleNum: 1, //1px 多少m
      scaleSource: 1, //1m深度 等于多少px
      interval: 100, //标尺100m 占多少px
      bgMoveDeep: 340 - 120, //主船的top值 主船高度120
      deepsName: [
        "Shark",
        "Idellus",
        "Whale",
        "Mackerel",
        "Worm",
        "Fang",
        "Slug",
        "Cucumber",
        "Lion",
      ],
      Shark: undefined,
      Idellus: undefined,
      Whale: undefined,
      Mackerel: undefined,
      Worm: undefined,
      Fang: undefined,
      Slug: undefined,
      Cucumber: undefined,
      Lion: undefined,
      SharkRadar: undefined,
      IdellusRadar: undefined,
      WhaleRadar: undefined,
      MackerelRadar: undefined,
      WormRadar: undefined,
      SlugRadar: undefined,
      CucumberRadar: undefined,
      LionRadar: undefined,
      ChinaHonorRadar: undefined,
      bgsName: ["fish_1", "fish_2", "fish_3"],
    };
  },
  components: {
    Notice,
    //从0~5000米，主船以200米/秒匀速下潜；
    //主船下潜到5000米时，弹出对话框：加速下潜！（5001~10000米） 此时速度切换为400米/秒匀速下潜直至底端。
  },
  methods: {
    audioClick() {
      this.audioStatus = !this.audioStatus;
      if (this.audioStatus === false) {
        this.audioPauseAll();
      } else {
        document.getElementById("audioBg").play();
      }
    },
    audioPlay(item) {
      if (this.audioStatus) {
        let musicEle0 = document.getElementById(item);
        musicEle0.play();
      }
    },
    audioPause(item) {
      let musicEle0 = document.getElementById(item);
      musicEle0.pause();
    },
    audioPauseAll() {
      document.getElementById("audioBg").pause();
      document.getElementById("audioScan2").pause();
      document.getElementById("audioFinish").pause();
      document.getElementById("audioSubmarine").pause();
    },
    /**
     * 判断当前深度是否需要弹出主船气泡框
     * @param {*} deep    当前深度
     */
    getInfoFish(deep) {
      let temp = parseInt(deep * this.scaleNum);
      if (this.nowFish === "Shark") {
        return true;
      }
      //console.log("getInfoFish",temp+320)
      for (let index of this.deeps) {
        if (temp + 320 === index || temp + 320 === index + 1) {
          return true;
        }
      }
    },
    /**
     * 创建标尺
     * @param {*} height  当前背景深度 
    */
    createRuler(height){
        //传入的高度画一个10000M的标尺 100M显示一段
        this.interval = parseInt(height / 100) //100m 多高
        this.scaleSource = parseFloat(height / 10000) //1m多少px
        this.scaleNum =  100 / this.interval // 1px 多少m
        let num = 0,unit="m"
        let vdom = "" 
        
        for(let i = 0 ; i < 101; i++){
            let temp = num
            if(i>9){
                temp = num / 1000
                unit='km'
            }
            if(i === 100){
              temp = 10909
              unit = 'm'
            }
            vdom += `<p style="height:`+this.interval+`px">-`+temp+unit+`</p>`
            num = num+100
        }
        document.getElementById("ruler").innerHTML = vdom;
    },
    logoTest() {
      //this.callAppLive()
      //this.scanClick()
      this.finishGame();
    },
    /**
     * 主船点击事件
     */
    submarineClick() {
      //21238457084818071
      //"https://m.yangshipin.cn/user?cpid=21238457084818071&ptag=4_1.8.0.21678_wxf"
      this.callApp(
        null,
        "https://m.yangshipin.cn/user?cpid=21238457084818071&ptag=4_1.8.0.21678_wxf"
      );
    },

    /**
     * 清除气泡
     */
    clearBubbles() {
      for (let i = 0; i < this.particles.length; i++) {
        this.particles[i].destroyPartical();
      }
    },
    /**
     * 停止按钮
     * 清除当前定时器、将按钮置为下潜状态
     */
    btnStopClick() {
      this.audioPause("audioSubmarine");
      clearInterval(this.deepTimer);
      this.btnDownStatus = true;
    },

    /**
     * 删除当前鱼
     */
    deleteFish() {
      if (this.nowFish) document.getElementById(this.nowFish).remove();
    },
    /**
     * 停止在当前深度时的公用参数更新
     */
    deepStopHandle(item) {
      this.audioPause("audioSubmarine");
      clearInterval(this.deepTimer);
      if (item === "ChinaHonor") {
        this.btnStatus = "scan"; //扫描状态
        this.nowFish = "ChinaHonor";
        this.noticeStatus = "ChinaHonor";
        localStorage.setItem("YspCurrentDeep", this.currentDeep); //端内跳转记录使用
      } else {
        this.btnStatus = "downAndScan"; //扫描状态
        this.nowFish = item;
        this["move" + item]();
      }
      this.btnDownStatus = true; //下潜 => 停止
    },
    /**
     * 寻找对应刻度 停止在当前刻度
     */
    switchFunc(deep) {
      let that = this;
      switch (deep) {
        case 7100:
          that.deepStopHandle("ChinaHonor");
          return;
          break;
        case 7100 + 1:
          that.deepStopHandle("ChinaHonor");
          return;
          break;
        case 2100:
          that.createBg4();
          return;
          break;
        case 2100 + 1:
          that.createBg4();
          return;
          break;
        case that.deeps[1]:
          that.deepStopHandle(that.deepsName[1]);
          return;
          break;
        case that.deeps[1] + 1:
          that.deepStopHandle(that.deepsName[1]);
          return;
          break;
        case that.deeps[2]:
          that.deepStopHandle(that.deepsName[2]);
          return;
          break;
        case that.deeps[2] + 1:
          that.deepStopHandle(that.deepsName[2]);
          return;
          break;
        case that.deeps[3]:
          that.deepStopHandle(that.deepsName[3]);
          return;
          break;
        case that.deeps[3] + 1:
          that.deepStopHandle(that.deepsName[3]);
          return;
          break;
        case that.deeps[4]:
          that.deepStopHandle(that.deepsName[4]);
          return;
          break;
        case that.deeps[4] + 1:
          that.deepStopHandle(that.deepsName[4]);
          return;
          break;
        case that.deeps[5]:
          that.deepStopHandle(that.deepsName[5]);
          return;
          break;
        case that.deeps[5] + 1:
          that.deepStopHandle(that.deepsName[5]);
          return;
          break;
        case that.deeps[6]:
          that.deepStopHandle(that.deepsName[6]);
          return;
          break;
        case that.deeps[6] + 1:
          that.deepStopHandle(that.deepsName[6]);
          return;
          break;
        case that.deeps[7]:
          that.deepStopHandle(that.deepsName[7]);
          return;
          break;
        case that.deeps[7] + 1:
          that.deepStopHandle(that.deepsName[7]);
          return;
          break;
        case that.deeps[8]:
          that.deepStopHandle(that.deepsName[8]);
          return;
          break;
        case that.deeps[8] + 1:
          that.deepStopHandle(that.deepsName[8]);
          return;
          break;
        default:
          break;
      }
    },
    /**
     * 下潜按钮
     */
    btnDownClick() {
      //如果是从扫描后点击下潜
      if (this.btnStatus === "downAndScan") {
        this.fromScanHalfCallBack();
      }
      //this.clearBubbles()
      //下潜 => 停止
      this.btnDownStatus = false;
      //remove 上一个鱼
      //this.deleteFish();
      const that = this;
      const bgHeight = parseInt(
        (9100 * document.documentElement.clientWidth) / 750
      ); //根据长宽比 算出当前分辨率下 背景图片高度 （原图:750*9100）
      const maxTop = bgHeight - document.documentElement.clientHeight; //最大偏移量

      if (this.bgMove) {
        this.audioPlay("audioBg");
        this.nowFish = "";
        //移动背景
        this.btnStatus = "down"; //下潜状态
        this.deepTimer = setInterval(function () {
          that.currentDeep += 1;
          let temp = that.currentDeep - that.bgMoveDeep;
          let trueTop = 0; //背景实际移动的top值
          console.log(
            "当前深度:",
            that.currentDeep + "当前bgTop:",
            temp + "背景move",
            "用时:"+ new Date()
          );

          that.noticeShow = true;

          document
            .getElementById("ruler")
            .setAttribute("style", "top:-" + temp + "px");
          document
            .getElementById("backgroundImg")
            .setAttribute("style", "top:-" + temp + "px");

          let compare = parseInt(that.currentDeep * that.scaleNum); //currentDeep对应标尺比例1:2，分辨率不同会影响深度
          //当遇到鱼群/中国探测踪迹时 清除计时器
          //deeps: [440, 1400, 2000, 2500, 3000, 3800, 5000, 7000, 8000],
          //deepsName: ['Shark','Idellus','Whale','Mackerel','Worm','Fang','Slug','Cucumber','Lion']
          console.log("当前compare", compare);
          that.switchFunc(compare + 320);
          //已下潜到 背景高度最底部 清除计时器
          if (temp === maxTop) {
            clearInterval(that.deepTimer);
            //将主船移到底部
            that.moveSubmarine(
              that.bgMoveDeep,
              document.documentElement.clientHeight - 220 - 60,
              "bottom"
            );
            return;
          }
        }, 10);
      } else {
        //移动主船(动画刚开始；动画结尾)
        this.moveSubmarine(this.currentDeep, this.bgMoveDeep, "start");
      }
    },
    /**
     * 移动主船
     * @param {*} from    开始位置  单位:px
     * @param {*} to      结束位置
     * @param {*} status  主船状态
     */
    moveSubmarine(from, to, status) {
      console.log("start",new Date())
      if (status === "start") {
        this.audioPlay("audioSubmarine");
      }
      const that = this;
      let tempPx = from;
      this.deepTimer = setInterval(function () {
        console.log("当前深度:", that.currentDeep);
        console.log("当前top:", tempPx);
        if (tempPx === to) {
          console.log(
            "结束主船:",
            tempPx,
            "文档高度:",
            document.documentElement.clientHeight,
            new Date()
          );
          if (status === "start") {
            that.bgMove = true; //主船第一段移动结束 开始移动背景
            that.noticeShow = true;
            that.btnStatus = "downAndScan"; //扫描状态
            that.nowFish = "Shark";
            that.audioPause("audioSubmarine");
            that.moveShark();
          } else if (status === "bottom") {
            //主船到底
            that.audioPlay("audioFinish");
            that.dbBtnShow = false; // 隐藏底部按钮
            that.btnStatus = "bottom"; //炫耀一下按钮
            that.noticeStatus = "bottom";

            let tempRuler =
              parseInt(document.getElementById("ruler").style.top) - 200;
            document.getElementById("ruler").style.top = tempRuler + "px";
            that.finishGame(); //弹出成就框框
          }
          clearInterval(that.deepTimer);
          return;
        }
        if (tempPx >= document.documentElement.clientHeight - 120) {
          that.dbBtnShow = false; // 隐藏底部按钮
          that.btnStatus = "bottom"; //炫耀一下按钮
          that.noticeStatus = "bottom";
          that.finishGame(); //弹出成就框框
          clearInterval(that.deepTimer);
          return;
        }
        that.currentDeep += 1;
        tempPx += 1;
        document.getElementById("submarine").style.top = tempPx + "px";
      }, 10);
    },
    btnDownDisable() {
      //clearInterval(this.deepTimer)
    },
    /**
     * 从扫描状态关闭弹窗
     */
    halfCallBack() {
      this.btnStatus = "downAndScan";
    },
    /**
     * 从扫描状态关闭弹窗后点击下潜状态时的运动函数
     */
    fromScanHalfCallBack() {
      this.btnDownStatus = true;
      this.btnStatus = "down";
      if (
        this.nowFish === "Worm" ||
        this.nowFish === "Cucumber" ||
        this.nowFish === "ChinaHonor" ||
        this.nowFish === "Slug"
      ) {
        //不动的素材
        return;
      } else if (
        this.nowFish === "Idellus" ||
        this.nowFish === "Whale" ||
        this.nowFish === "Lion"
      ) {
        //从左往右的鱼
        this[this.nowFish].tweenMove(this.nowFish, 1000, 0, 13000);
      } else {
        //从右往左的鱼
        this[this.nowFish].tweenMove(this.nowFish, -1000, 0, 12000);
      }
    },
    /**
     * 点击扫描
     */
    scanClick() {
      if (
        this.nowFish !== "ChinaHonor" &&
        this.nowFish !== this.scanStoreFish
      ) {
        this.clickFishNum += 1;
        localStorage.setItem("YspFishNum", this.clickFishNum);
      }
      this.scanStoreFish = this.nowFish;
      this.audioPlay("audioScan2");
      this.btnStatus = "scaning";
      this.noticeStatus = "scaning";
      this.noticeShow = false;
      this.onTraceCookies("cvm-marker-click");
      const that = this;
      document.getElementById(this.nowFish+"Radar").style.visibility = ""
      setTimeout(()=>{
            that.btnStatus = ""
            that.noticeStatus = ""
            document.getElementById(that.nowFish+"Radar").style.visibility = "hidden"
            if (that.nowFish === "ChinaHonor") {
                that.createHalfMore({
                        callback: that.halfCallBack,
                        text:
                            "2012年6月27日，蛟龙号在马里亚纳海沟试验海区创造了下潜7062米的中国载人深潜纪录，同时也创造了世界同类作业型潜水器的最大下潜深度纪录，标志中国具备了载人到达全球99.8%以上海洋深处进行作业的能力。",
                        title: "中国载人潜水器马沟成就",
                        videoid: "q000003ekay",
                        videopid: "600058275",
                        videotitle: "进军地球最深处，马里亚纳海沟我们来了！",
                        videotype: "vid",
                        videoavatar: that.defaultConfig.avatar,
                        followAddImg: that.defaultConfig.followAddImg,
                        yspCountImg: that.defaultConfig.yspCountImg,
                        currentDeep: that.currentDeep,
                        //videoJumpTag: that.videoJumpTag
                });
            } else {
                that.createHalf({
                    callback: that.halfCallBack,
                    text: that.defaultConfig.fishConfMap[that.nowFish].text,
                    title: that.defaultConfig.fishConfMap[that.nowFish].title,
                    videoid: that.defaultConfig.fishConfMap[that.nowFish].videoid,
                    videotitle: that.defaultConfig.fishConfMap[that.nowFish].videotitle,
                    videotype: "vid",
                    videoavatar: "",
                    nowFish: that.nowFish,
                    currentDeep: that.currentDeep,
                    //videoJumpTag: that.videoJumpTag
                });
            }
            that.audioPause("audioScan2")
      },800)
    },
    /**
     * 主船到底 游戏结束 自动弹框
     */
    finishGame() {
      this.onTraceCookies("cvm-marker-click");
      let temp = localStorage.getItem("YspDistance");
      if (isNaN(localStorage.getItem("YspDistance")) || localStorage.getItem("YspDistance") === null) {
        temp = "迷之距离";
      }
      this.createHalfBottom({
        distance: temp === "迷之距离" ? temp : temp + 'km',
        deepDistance: "10909m",
        finishFish: this.clickFishNum,
        allFish: 9,
        finishHonor: localStorage.getItem("YspFinishHonor") ? 1 : 0,
        allHonor: 1,
      });
    },
    /**
     * 创建各种素材
     */
    createBg1() {
      let animationFish1 = new Animation();
      animationFish1.animationFish1(
        0,
        600,
        document.getElementById("backgroundImg")
      );
    },
    createBg2() {
      let animationFish2 = new Animation();
      animationFish2.animationFish2(
        0,
        3100,
        document.getElementById("backgroundImg")
      );
    },
    createBg3() {
      let animationFish3 = new Animation();
      animationFish3.animationFish3(
        0,
        2300,
        document.getElementById("backgroundImg")
      );
    },
    createBg4() {
      let animationFish4 = new Animation();
      animationFish4.animationFish4(
        document.documentElement.clientWidth - 100,
        200,
        document.getElementById("backgroundImg")
      );
    },
    // createBg5() {
    //   let animationFish5 = new Tween();
    //   animationFish5.create(0, 200, 200, "bgFish5", document.getElementById("backgroundImg"));
    //   animationFish5.tweenFrame("bgFish5",this.data.bgFish5, 100)
    //   //animationFish5.tweenMove("bgFish5", 400, 0, 5000);
    // },
    createBg5() {
      let animationFish5 = new Tween();
      animationFish5.create(
        0,
        200,
        200,
        "bgFish6",
        document.getElementById("backgroundImg")
      );
      document.getElementById("bgFish6").src =
        "https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/other/fish_6/1.png";
      animationFish5.tweenMove(
        "bgFish6",
        document.documentElement.clientWidth + 180,
        0,
        5000
      );
    },

    /*
     * 各种素材初始化(可以扫描)
     */

    createChinaHonor() {
      let ship = new Animation();
      ship.animationShip(
        null,
        (7002 - 120) * this.scaleSource,
        document.getElementById("backgroundImg")
      );
      this.ChinaHonorRadar = new Animation();
      this.ChinaHonorRadar.animationRadar(
        null,
        (7002 - 120) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "ChinaHonorRadar",
        -50
      );
    },
    createShark() {
      //650
      this.Shark = new Tween();
      this.Shark.create(
        null,
        (650 - 90) * this.scaleSource,
        350,
        "Shark",
        document.getElementById("backgroundImg")
      );
      this.SharkRadar = new Animation();
      this.SharkRadar.animationRadar(
        null,
        (650 - 90) * this.scaleSource + 50,
        document.getElementById("backgroundImg"),
        "SharkRadar",
        100
      );
      this.Shark.tweenFrame("Shark", this.data.shark, 100);
    },
    moveShark() {
      //650
      //this.particles = this.createBubble()
      this.Shark.tweenMove("Shark", -400, 0, 5000);
      let tween = new Tween();
      tween.tweenMove("SharkRadar", -400, 0, 5000);
      //this.SharkRadar.tweenMove("SharkRadar", -400, 0, 5000);
    },
    createIdellus() {
      //1400
      this.Idellus = new Tween();
      this.Idellus.create(
        0,
        (1400 - 50) * this.scaleSource,
        170,
        "Idellus",
        document.getElementById("backgroundImg")
      );
      this.Idellus.tweenFrame("Idellus", this.data.idellus, 300);
      this.IdellusRadar = new Animation();
      this.IdellusRadar.animationRadar(
        0,
        (1400 - 50) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "IdellusRadar",
        0
      );
    },
    moveIdellus() {
      //1400
      this.Idellus.tweenMove("Idellus", 250, 0, 5000);
      let tween = new Tween();
      tween.tweenMove("IdellusRadar", 250, 0, 5000);
    },
    createWhale() {
      //2000
      this.Whale = new Tween();
      this.Whale.create(
        0,
        (2000 - 50) * this.scaleSource,
        400,
        "Whale",
        document.getElementById("backgroundImg")
      );
      this.Whale.tweenFrame("Whale", this.data.whale, 150);
      this.WhaleRadar = new Animation();
      this.WhaleRadar.animationRadar(
        0,
        (2000 - 50) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "WhaleRadar",
        200
      );
    },
    moveWhale() {
      //2000
      this.Whale.tweenMove("Whale", 400, 0, 5000);
      let tween = new Tween();
      tween.tweenMove("WhaleRadar", 400, 0, 5000);
    },
    createMackerel() {
      //2500
      this.Mackerel = new Tween();
      this.Mackerel.create(
        null,
        2500 * this.scaleSource,
        100,
        "Mackerel",
        document.getElementById("backgroundImg")
      );
      this.Mackerel.tweenFrame("Mackerel", this.data.mackerel, 100);
      this.MackerelRadar = new Animation();
      this.MackerelRadar.animationRadar(
        null,
        2500 * this.scaleSource,
        document.getElementById("backgroundImg"),
        "MackerelRadar",
        0
      );
    },
    moveMackerel() {
      //2500
      this.Mackerel.tweenMove("Mackerel", -200, 0, 3000);
      let tween = new Tween();
      tween.tweenMove("MackerelRadar", -200, 0, 3000);
    },
    createWorm() {
      //3000
      this.Worm = new Tween();
      this.Worm.create(
        0,
        (3000 - 70) * this.scaleSource,
        100,
        "Worm",
        document.getElementById("backgroundImg")
      );
      this.Worm.tweenFrame("Worm", this.data.worm, 100);
      this.Worm.tweenMove("Worm", 80, 0, 5000);
      this.WormRadar = new Animation();
      this.WormRadar.animationRadar(
        0,
        (3000 - 70) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "WormRadar",
        -70
      );
    },
    moveWorm() {
      //3000 管状蠕虫不移动
      //this.Worm.tweenMove("Worm", 100, 0, 5000);
    },
    createFang() {
      //3800
      this.Fang = new Tween();
      this.Fang.create(
        null,
        (3800 - 50) * this.scaleSource,
        100,
        "Fang",
        document.getElementById("backgroundImg")
      );
      this.Fang.tweenFrame("Fang", this.data.fang, 100);
      this.FangRadar = new Animation();
      this.FangRadar.animationRadar(
        null,
        (3800 - 50) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "FangRadar",
        0
      );
    },
    moveFang() {
      //3800
      this.Fang.tweenMove("Fang", -300, 0, 3000);
      let tween = new Tween();
      tween.tweenMove("FangRadar", -300, 0, 3000);
    },
    createSlug() {
      //5000
      this.Slug = new Tween();
      this.Slug.create(
        0,
        (5000 - 50) * this.scaleSource,
        100,
        "Slug",
        document.getElementById("backgroundImg")
      );
      this.Slug.tweenFrame("Slug", this.data.slug, 100);
      this.Slug.tweenMove("Slug", 80, 0, 3500);
      this.SlugRadar = new Animation();
      this.SlugRadar.animationRadar(
        0,
        (5000 - 50) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "SlugRadar",
        -50
      );
    },
    moveSlug() {
      //5000
      // this.Slug.tweenMove("Slug", 80, 0, 3500);
      // let tween = new Tween()
      // tween.tweenMove("SlugRadar", 80, 0, 3500);
    },
    createCucumber() {
      //7000
      this.Cucumber = new Tween();
      this.Cucumber.create(
        0,
        (7000 - 150) * this.scaleSource,
        90,
        "Cucumber",
        document.getElementById("backgroundImg")
      );
      this.Cucumber.tweenFrame("Cucumber", this.data.cucumber, 100);
      this.Cucumber.tweenMove("Cucumber", 70, 0, 4000);
      this.CucumberRadar = new Animation();
      this.CucumberRadar.animationRadar(
        0,
        (7000 - 150) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "CucumberRadar",
        -70
      );
    },
    moveCucumber() {
      //7000
      //this.Cucumber.tweenMove("Cucumber", 100, 0, 4000);
      //let tween = new Tween()
      //tween.tweenMove("CucumberRadar", 100, 0, 4000);
    },
    createLion() {
      //8000
      this.Lion = new Tween();
      this.Lion.create(
        0,
        (8000 - 100) * this.scaleSource,
        60,
        "Lion",
        document.getElementById("backgroundImg")
      );
      this.Lion.tweenFrame("Lion", this.data.lion, 100);
      this.LionRadar = new Animation();
      this.LionRadar.animationRadar(
        0,
        (8000 - 100) * this.scaleSource,
        document.getElementById("backgroundImg"),
        "LionRadar",
        0
      );
    },
    moveLion() {
      //8000
      this.Lion.tweenMove("Lion", 250, 0, 8000);
      let tween = new Tween();
      tween.tweenMove("LionRadar", 250, 0, 8000);
    },
    jumpClientInitParam() {
      //端内端外有可能分辨率不一致
      this.currentDeep = parseInt(
        $getQuery(window.location.href, "currentDeep")
      );

      this.clickFishNum = isNaN(parseInt(
        $getQuery(window.location.href, "YspFishNum")
      )) ? 0 : parseInt(
        $getQuery(window.location.href, "YspFishNum")
      );

      localStorage.setItem(
        "YspDistance",
        $getQuery(window.location.href, "YspDistance")
      );

      localStorage.setItem(
        "YspFinishHonor",
        $getQuery(window.location.href, "YspFinishHonor")
      );

      localStorage.setItem(
        "yspRepsectPeople",
        $getQuery(window.location.href, "yspRepsectPeople")
      );
    },
  },
  beforeDestroy() {
    document.getElementById("half").remove();
  },
  async created() {
    //alert(returnCitySN["cip"]+','+returnCitySN["cname"])
    if (returnCitySN["cname"] === "国内未能识别的地区") {
      this.ipSource = "foreign";
      localStorage.setItem("YspIpSourceForeign", "foreign");
    }
  },
  async mounted() {
    let that = this;
    //初始化各种素材到对应位置
    //首屏先渲染
    setTimeout(() => {
      let ship = new Animation();
      ship.animationStruggle(100, 200, document.getElementById("game"));
      document.getElementById("submarine").onclick = that.submarineClick;
      that.createBg1();
      that.createShark();
    }, 500);
    //后渲染
    setTimeout(() => {
      that.createBg2();
      that.createBg3();
      that.createBg5();
      that.createChinaHonor();
      that.createCucumber();
      that.createFang();
      that.createIdellus();
      that.createLion();
      that.createMackerel();
      that.createSlug();
      that.createWhale();
      that.createWorm();
    }, 800);
    console.log("页面地址", window.location.href);
    //init ruler
    //750 * 9100
    this.createRuler(
      parseInt((9100 * document.documentElement.clientWidth) / 750)
    );
    //创建气泡
    //this.particles = this.createBubble()
    if (
      $getQuery(window.location.href, "deepAction") !== "normal" &&
      $getQuery(window.location.href, "deepAction") !== "chinaHonor" &&
      $getQuery(window.location.href, "deepAction") !== "bottom"
    ) {
      //that.$root.$children[0].$data.change.playChange();
    }
    setTimeout(() => {
      //端内 直接跳到视频进度处
      if ($getQuery(window.location.href, "deepAction") == "normal") {
        this.nowFish = $getQuery(window.location.href, "nowFish");
        this.scanStoreFish = $getQuery(window.location.href, "nowFish");
        this.jumpClientInitParam();
        console.log(this.nowFish);
        //this["create"+this.nowFish]()
        document.getElementById("submarine").style.top = "220px";
        if (this.nowFish !== "Shark") {
          console.log("testVideo");
          console.log(this.deeps[this.deepsName.indexOf(this.nowFish)]);
          console.log(
            this.deeps[this.deepsName.indexOf(this.nowFish)] * this.scaleSource
          );
          console.log(this.scaleSource);
          console.log("testVideoFinish");
          //反推一下当前深度
          //this.currentDeep = (this.deeps[this.deepsName.indexOf(this.nowFish)] * this.scaleSource - 320) / this.scaleNum
          //top = that.currentDeep - that.bgMoveDeep;
          let temp = parseInt(this.currentDeep - this.bgMoveDeep);
          document
            .getElementById("ruler")
            .setAttribute("style", "top:-" + temp + "px");
          document
            .getElementById("backgroundImg")
            .setAttribute("style", "top:-" + temp + "px");
        } else {
          this.currentDeep = 220;
        }
        this.bgMove = true; //主船第一段移动结束 开始移动背景
        this.noticeShow = true;
        this.btnStatus = "downAndScan"; //扫描状态
        setTimeout(() => {
          that["move" + this.nowFish]();
          that.scanClick();
        }, 1000);
      }
      //端内 直接跳到蛟龙号进度处
      if ($getQuery(window.location.href, "deepAction") == "chinaHonor") {
        this.jumpClientInitParam();
        document.getElementById("submarine").style.top = "220px";
        document
          .getElementById("ruler")
          .setAttribute("style", "top:-" + 6600 * this.scaleSource + "px");
        document
          .getElementById("backgroundImg")
          .setAttribute("style", "top:-" + 6600 * this.scaleSource + "px");
        this.nowFish = "ChinaHonor";
        this.bgMove = true; //主船第一段移动结束 开始移动背景
        this.createChinaHonor();
        this.scanClick();
      }
      //端内 直接跳到底部进度处
      if ($getQuery(window.location.href, "deepAction") == "bottom") {
        this.jumpClientInitParam();
        setTimeout(() => {
          document.getElementById("submarine").style.top = "400px";
          document
            .getElementById("ruler")
            .setAttribute("style", "top:-" + 8100 * this.scaleSource + "px");
          document
            .getElementById("backgroundImg")
            .setAttribute("style", "top:-" + 8100 * this.scaleSource + "px");
        }, 500);

        //alert("系数",this.scaleSource,"top",document.documentElement.clientHeight - 10000 * this.scaleSource)
        this.dbBtnShow = false; // 隐藏底部按钮
        this.bgMove = true; //主船第一段移动结束 开始移动背景
        this.btnStatus = "bottom"; //炫耀一下按钮
        this.noticeStatus = "bottom";
        this.currentDeep = 10000;

        this.finishGame();
      }
    }, 2000);

    //当视频在h5内部播放时,关闭所有背景音乐
    EventBus.$on("isVideoPlayAndPauseBgMusic", (res) => {
      if (res) {
        this.audioPauseAll();
      }
    });
  },
};
</script>
<style scoped>
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.chinaHonor {
  display: none;
  position: absolute;
  z-index: 100;
  width: 300px;
  top: 350px;
  right: 20px;
}
.notice {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  z-index: 101;
}
.noticeStart {
  /* top: 95px; */
  top: 70px;
}
.noticeFinish {
  bottom: 120px;
}
.noticeFish {
  top: 115px;
}
.noticeSpeed {
  top: 115px;
}
.background {
  position: relative;
  width: 100%;
}
.background2 {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -100%;
}
.submarine {
  position: fixed;
  width: 100%;
  top: 0;
  margin: 0 auto;
  z-index: 188;
}
.submarine-new {
  width: "9.5625rem";
  height: "5.34375rem";
  position: "fixed";
  z-index: 188;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.submarine-img {
  width: 200px;
}
.logo {
  position: fixed;
  right: 40px;

  top: 5px;
  z-index: 188;
  width: 96px;
}
.audio {
  position: fixed;
  top: 6px;
  right: 5px;

  z-index: 188;
  width: 26px;
  height: 26px;
}
.ruler {
  position: absolute;
  top: 0px;
  right: 10px;
  z-index: 188;
  font-size: 12px;
}
.ruler p {
  color: #699cec;
  margin: 0px;
  padding: 0px;
}
.bottom-btn-div {
  position: fixed;
  bottom: 5px;
  margin: 0 auto;
  width: 100%;
  z-index: 188;
}
.bottom-btn {
  display: inline-block;
  width: 97px;
  height: 36px;
  margin: 0 10px;
}
/* #game{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    bottom: -100%;
} */
</style>


<style scoped>
#home {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.home-background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -100;
}
.home-bubble {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -99;
}
.home-center {
  position: fixed;
  width: 100%;
  margin: 0 auto;
}
.home-map {
  top: 60px;
  margin-left: -50px;
}
.home-chinaMap-img {
  width: 240px;
}
.home-lat-img {
  width: 100px;
  position: absolute;
  left: 263px;
  top: 60px;
}
.home-people-img {
  width: 100px;
}
.home-txtSecret {
  bottom: 380px;
}
.home-deepTip {
  bottom: 250px;
}
.home-submarine {
  bottom: 150px;
}
.home-deepTip-img {
  margin-left: 120px;
  width: 160px;
}
.home-txtSecret-img {
  width: 300px;
}
.home-submarine-img {
  width: 200px;
}
.home-bottom-btn-div {
  bottom: 5px;
}
.home-bottom-btn {
  display: inline-block;
  width: 260px;
  height: 90px;
}
.home-bottom-text {
  color: rgba(189, 189, 187);
  font-size: 18px;
  font-weight: bold;
}
.home-distance-text {
  color: orange;
}
</style>
